<!DOCTYPE html>
<html>

<head>
  <title>使用jquery ajax方法操作数据</title>
  <script type="text/javascript" src="./jquery-3.7.1.min.js"></script>
  <style>
    table,
    td,
    th {
      border: 1px solid black;
      border-collapse: collapse;
    }

    table {
      width: 500px;
      text-align: center;
    }

    tr {
      height: 35px;
    }
  </style>
</head>

<body>
  <button id="getBtn">获取所有水果数据</button>
  <div id="showData"></div>

  <hr>
  水果：<input id="fruitName" type="text" name="fruitName"><br>
  价格：<input id="fruitPrice" type="number" name="fruitPrice"><br>
  <button id="postBtn">添加水果</button>

  <hr>
  水果id：<input id="putId" type="text" name="fruitId"><br>
  价格：<input id="putPrice" type="text" name="fruitPrice"><br>
  <button id="putBtn">更新水果价格</button>

  <hr>
  水果id：<input id="delId" type="text" name="delName"><br>
  <button id="delOne">删除水果</button>

  <script type="text/javascript">
    //根据id删除水果
    $("#delOne").click(function () {
      $.ajax({
        type: 'delete',
        url: 'http://localhost:3000/fruits/' + $("#delId").val(),
        success: function (data) {
          console.log("水果删除成功")
        },
        error: function () {
          alert("水果删除失败")
        }
      })
    })

    //更新水果价格
    $("#putBtn").click(function () {
      $.ajax({
        type: 'patch',
        url: 'http://localhost:3000/fruits/' + $("#putId").val(),
        data: {
          price: $("#putPrice").val()
        },
        success: function (data) {
          console.log("水果价格更新成功")
        },
        error: function () {
          alert("水果价格更新失败")
        }
      })
    })

    // 添加水果
    $("#postBtn").click(function () {
      $.ajax({
        type: 'post',
        url: 'http://localhost:3000/fruits',
        data: {
          name: $("#fruitName").val(),
          price: $('#fruitPrice').val()
        },
        success: function (data) {
          console.log("水果添加成功")
        },
        error: function () {
          alert("水果添加失败")
        }
      })
    })

    // 获取所有水果数据
    $("#getBtn").click(function () {
      $.ajax({
        type: 'get',
        url: 'http://localhost:3000/fruits',
        success: function (data) {
          // data 对象数组
          var h = ""
          h += "<table border='1'>"
          h += "<thead><th>ID</th><th>name</th><th>price</th></thead>"
          h += "<tbody>"
          for (var i = 0; i < data.length; i++) {
            var o = data[i]
            h += "<tr>"
            h += "<td>" + o.id + "</td><td>" + o.name + "</td><td>" + o.price + "</td>"
            h += "</tr>"
          }
          h += "<tbody>"
          h += "</table>"
          $("#showData").empty().append(h)
        },
        error: function () {
          alert("get error")
        }
      })
    })


  </script>
</body>

</html>